<template>
  <div id="cornerComment" v-if="detailVisible">
    <div class="cornerComment-in">
      <div class="cornerComment-in-title">
        <span>Edit Components</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody">
        <el-form ref="form" :model="form" label-width="160px">
          <el-form-item label="component name" prop="deviceId">
            <el-input v-model="form.componentName" placeholder="component name"/>
          </el-form-item>
          <el-form-item label="Corresponding field" prop="name">
            <el-input v-model="form.columnName" placeholder="Corresponding field"/>
          </el-form-item>
          <el-form-item label="field value" prop="pushTopic">
            <el-input v-model="form.columnValue" placeholder="field value"/>
          </el-form-item>
          <el-form-item label="Is it a switch" prop="isDisjunctor">
            <el-switch
              v-model="form.isDisjunctor"
              active-text="It's a switch"
              active-color="#13ce66"
              inactive-color="#ff4949"
              inactive-text="Not a switch"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
          </el-form-item>
        </el-form>
      </div>
      <div class="cornerComment-in-footer">
        <el-button size="small" @click="closePOpup">cancel</el-button>
        <el-button size="small" type="primary" @click="saveJsonFn">confirm</el-button>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  props: ['visible', 'editooption'],
  name: "deviceDetail",
  data() {
    return {
      detailVisible: false,
      form: {
        componentName: '',
        columnName: '',
        columnValue: '',
        isDisjunctor: ''
      },
    }
  },
  watch: {
    visible() {
      this.detailVisible = this.visible
      if (this.visible && this.editooption) {
        this.form = this.editooption
      }
      if (!this.visible) {
        this.form = {
          componentName: '',
          columnName: '',
          columnValue: '',
          isDisjunctor: ''
        }
      }
    }
  },
  methods: {
    saveJsonFn() {
      console.log('jsonList:', this.form)
      this.$emit('getComponent', this.form)
    },
    closePOpup() {
      this.$emit('update:visible', false)
    },
  }
}
</script>

<style scoped>
.Json-list {
  border: 1px solid #eee;
  padding: 10px;
}

.Json-list-line {
  display: flex;
  align-items: center;
}

.w-150 {
  width: 150px;
}

.ml-10 {
  margin-left: 10px;
}

.mr-10 {
  margin-right: 10px;
}

.mb-10 {
  margin-bottom: 10px;
}

#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
}

.cornerComment-in {
  width: 500px;
  height: 470px;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 10px;
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}

.Json-small-list {
  background: #eee;
  padding: 10px;
  margin-top: 10px;
}

.term-list {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.term-list-left {
  width: 100px;
}

.term-list-right {
  flex: 1;
  display: flex;
}

.term-list-right-title {
  width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.term-list-right-content {
  display: flex;
  align-items: center;
}

.term-list-right-icon {
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: start;
  padding-left: 20px;
}

.term-list-right-icon i {
  font-size: 26px;
  margin-right: 10px;
  cursor: pointer;
}

.term-list-right-icon i.el-icon-remove-outline {
  color: #E65D6E;
}

.term-list-right-icon i.el-icon-circle-plus-outline {
  color: #00afff;
}
</style>
